<template>
	<view class='u-p-50'>
		<!-- <view class="u-flex u-row-center u-p-b-40">
			<u-image class='u-m-b-40' width='160rpx' height='160rpx' src="/static/logo.png" shape="circle">
			</u-image>
		</view> -->
		<view class="u-p-t-40 u-p-b-40">
			<view class="w-login-title">重置</view>
		</view>
		<u-form :model="form" ref="uForm" label-width='140'>
			<u-form-item label="手机号" prop="mobile">
				<u-input v-model="form.mobile" placeholder="请输入手机号" />
			</u-form-item>
			<u-form-item label="验证码" prop="code">
				<u-input v-model="form.code" placeholder="请填写验证码" />
				<u-button size="mini" slot="right" type="success" @click="getCode">{{codeText}}</u-button>
			</u-form-item>
			<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
			<u-form-item label="密码" prop="password">
				<u-input type='password' v-model="form.password" placeholder="请设置密码" />
			</u-form-item>
			<u-form-item label="确认密码" prop="againpwd">
				<u-input type='password' v-model="form.againpwd" placeholder="请再次输入密码" />
			</u-form-item>
		</u-form>
		<u-button class='u-m-t-80' type='success' @click="submit" :loading='loading'>提交
		</u-button>
		<!-- <view class="w-reg-btn u-flex u-row-center">
			<text class="u-tips-color">已有账号？</text><text class="u-light-color" @click="goPage()">现在登录</text>
		</view> -->
	</view>
</template>

<script>
	import {
		updatePwd,
		getByMobile,
		sendForgetSms
	} from '@/api/index.js'
	export default {
		data() {
			return {
				loading: false,
				mobile: '',
				code: '',
				codeNum:'',
				codeText: '',
				form: {
					mobile: '',
					// code:'',
					password: '',
					againpwd: '',
				},
				rules: {
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					code: [{
						required: true,
						message: '验证码不能为空',
						trigger: 'blur'
					}],
					password: [{
						min: 5,
						required: true,
						message: '密码不能少于5个字',
						trigger: ['change', 'blur']
					}],
					againpwd: [{
							required: true,
							message: '确认密码',
							trigger: ['change', 'blur']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.form.password == value;
							},
							message: '两次输入的密码不一致',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				}
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			submit() {
				this.$u.debounce(
					this.$refs.uForm.validate(valid => {
						if (valid) {
							this.loading = true
							if(this.codeNum!=this.form.code){
								this.$u.toast('验证码输入错误')
								this.loading = false
								return
							}
							getByMobile({mobile:this.form.mobile}).then(res=>{
								if(res && res.mobile){
									updatePwd(this.form).then(res => {
										this.loading = false
										this.$u.toast('密码重置成功，请登录')
										setTimeout(() => {
											this.$u.route({
												type: 'redirectTo',
												url:'/pages/login/login'
											})
										}, 800)
									}).catch(err=>{
										this.loading=false
									})
								}else{
									this.loading = false
									this.$u.toast('该号码未注册，请注册')
								}
							})
							
						} else {
							console.log('验证失败');
						}
					})
				)
			},
			codeChange(text) {
				this.codeText = text;
			},
			getCode() {
				if (this.$u.test.mobile(this.form.mobile)) {
					if (this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						sendForgetSms({mobile:this.form.mobile}).then(res=>{
							this.codeNum = res
							uni.hideLoading();
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						})
					} else {
						this.$u.toast('倒计时结束后再发送');
					}
				} else {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
				}
			},
			goPage() {
				this.$u.route({
					type: 'back'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.w-reg-btn {
		position: fixed;
		bottom: 50rpx;
		width: calc(100% - 100rpx);
	}

	.w-login-title {
		font-size: 27px;
		font-weight: 700;
		color: #262626;
		position: relative;

		// &::after {
		// 	position: absolute;
		// 	content: '';
		// 	left: 0;
		// 	z-index: -1;
		// 	bottom: 0;
		// 	height: 15rpx;
		// 	width: 110rpx;
		// 	background-color: #88DFBA;
		// 	border-radius: 2rpx;
		// }
	}
</style>
